<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>询许可证面积照顾条款</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 30px;
        }
        .container {
            display: flex;
            gap: 20px;
        }
        .add-container, .search-container {
            flex: 1;
        }
        input[type="text"], button {
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            background-color: #28a745;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #218838;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: center;
        }
        th {
            background-color: #f0f0f0;
        }
        .edit-input {
            width: 90%;
            padding: 5px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>查询许可证面积照顾条款</h1>
    <div class="container">
        <div class="add-container">
            <h2>添加合理布局政策照顾客户信息</h2>
            <input type="text" id="addInput1" placeholder="许可证号">
            <input type="text" id="addInput2" placeholder="企业字号名称">
            <input type="text" id="addInput3" placeholder="经营地址">
            <input type="text" id="addInput4" placeholder="持证人">
            <input type="text" id="addInput5" placeholder="照顾类型">
            <input type="text" id="addInput6" placeholder="情况说明">
            <input type="text" id="addInput7" placeholder="参照合理布局版本">
            <input type="text" id="addInput8" placeholder="备注">
            <button onclick="addData()">添加</button>
        </div>
        <div class="search-container">
            <h2>搜索信息</h2>
            <input type="text" id="searchInput" placeholder="输入搜索内容">
            <button onclick="searchData()">搜索</button>
        </div>
    </div>
    <table id="dataTable">
        <thead>
            <tr>
                <th>许可证号</th>
                <th>企业字号名称</th>
                <th>经营地址</th>
                <th>持证人</th>
                <th>照顾类型</th>
                <th>情况说明</th>
                <th>参照合理布局版本</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script>
        const getData = () => JSON.parse(localStorage.getItem('storedData')) || [];
        const saveData = (data) => localStorage.setItem('storedData', JSON.stringify(data));
        const renderTable = () => {
            const data = getData();
            const tableBody = document.querySelector('#dataTable tbody');
            tableBody.innerHTML = '';
            data.forEach((item, index) => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td contenteditable="true" data-index="${index}" data-col="0">${item[0]}</td>
                    <td contenteditable="true" data-index="${index}" data-col="1">${item[1]}</td>
                    <td contenteditable="true" data-index="${index}" data-col="2">${item[2]}</td>
                    <td contenteditable="true" data-index="${index}" data-col="3">${item[3]}</td>
                    <td contenteditable="true" data-index="${index}" data-col="4">${item[4]}</td>
                    <td contenteditable="true" data-index="${index}" data-col="5">${item[5]}</td>
                    <td contenteditable="true" data-index="${index}" data-col="6">${item[6]}</td>
                    <td contenteditable="true" data-index="${index}" data-col="7">${item[7]}</td>
                    <td>
                        <button onclick="deleteData(${index})">删除</button>
                    </td>
                `;
                tableBody.appendChild(row);
            });
        };

        document.getElementById('dataTable').addEventListener('input', (e) => {
            if (e.target.contentEditable === 'true') {
                const rowIndex = e.target.getAttribute('data-index');
                const colIndex = e.target.getAttribute('data-col');
                const newData = getData();
                newData[rowIndex][colIndex] = e.target.textContent;
                saveData(newData);
            }
        });

        function addData() {
            const inputs = document.querySelectorAll('[id^="addInput"]');
            const newDataItem = Array.from(inputs).map(input => input.value.trim());
            if (newDataItem.every(item => item !== '')) {
                const data = getData();
                data.push(newDataItem);
                saveData(data);
                inputs.forEach(input => input.value = '');
                renderTable();
            } else {
                alert('请填写所有列的数据');
            }
        }

        function deleteData(index) {
            const data = getData();
            data.splice(index, 1);
            saveData(data);
            renderTable();
        }

        function searchData() {
            const query = document.getElementById('searchInput').value.trim();
            const data = getData();
            const result = data.find(item => item.some(col => col.toLowerCase().includes(query.toLowerCase())));
            if (result) {
                window.location.href = `result.html?data=${encodeURIComponent(JSON.stringify(result))}`;
            } else {
                alert('未找到匹配的数据');
            }
        }

        // 初始化表格
        renderTable();
    </script>
</body>
</html>